@page "/pivot-table/virtual-scrolling"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_virtualdata

<SampleDescription>
   <p>This sample demonstrates the virtual scrolling option available for vertically and horizontally loading records and showing a large number of records with ease.</p>  
</SampleDescription>
<ActionDescription>
   <p>The pivot table provides an optimized way to render rows and columns inside the view-port alone without
        calculating the value of the entire pivot. To enable virtual scrolling, set the <code>EnableVirtualization</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> class to <b>true</b>.</p><br>
   <p>More information on the Blazor Pivot Table can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/virtual-scrolling/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotVirtualData" Width="100%" Height="500" EnableVirtualization="true" EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" EnableSorting="false" AlwaysShowValueHeader="true">
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="ProductID"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="Price" Caption="Unit Price"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Price" Format="C0"></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>

    </div>
</div>


<style>
    .e-pivotview {
        min-height: 200px;
    }
</style>

@code{

    public List<PivotVirtualData> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotVirtualData.GetVirtualData();
    }
}